import { createStyles } from 'antd-style';
import { PauseIcon, PlayIcon, style } from '@ycx/ui';
import { ConfigProvider, Flex, Slider } from 'antd';
import { RedoOutlined } from '@ant-design/icons';
import { FC } from 'react';

const useStyle = createStyles(({ css }) => {
  return {
    wrapper: css`
      position: absolute;
      z-index: 1;
      bottom: 289px;
      left: 680px;
      right: 360px;
      border-radius: 8px;
      border: 1px solid var(--ycx-container-border-color);
      background: var(--ycx-container-bg-color);
      box-shadow: 0 8px 12px 0 rgba(119, 130, 153, 0.08);
      backdrop-filter: blur(4px);
      padding: 2px 16px;
      min-width: 300px;
      user-select: none;
    `,
    icon: css`
      font-size: 24px;
      cursor: pointer;
    `,
  };
});

type Props = {
  onPause?: () => void;
  onPlay?: () => void;
  onRestart?: () => void;
  onChange: (value: number) => void;
  isPlay: boolean;
  allCount: number;
  current: number;
};

const ControlBar: FC<Props> = ({
  onPause,
  onPlay,
  onChange,
  onRestart,
  isPlay,
  allCount,
  current,
}) => {
  const { styles } = useStyle();

  return (
    <Flex className={styles.wrapper} vertical>
      <ConfigProvider
        theme={{
          components: {
            Slider: {
              colorPrimaryBorder: style.primaryColor,
              railSize: 2,
              handleSize: 6,
              handleSizeHover: 6,
              fontSize: 12,
            },
          },
        }}
      >
        <Slider value={current} max={allCount} onChange={onChange} min={1} />

        <Flex justify="space-between">
          <Flex gap={8}>
            {isPlay ? (
              <PauseIcon
                className={styles.icon}
                onClick={() => {
                  onPause?.();
                }}
              />
            ) : (
              <PlayIcon
                className={styles.icon}
                onClick={() => {
                  onPlay?.();
                }}
              />
            )}

            <RedoOutlined
              style={{
                fontSize: 16,
                cursor: 'pointer',
              }}
              onClick={onRestart}
            />
          </Flex>

          <div>
            {current}/{allCount}
          </div>
        </Flex>
      </ConfigProvider>
    </Flex>
  );
};

export default ControlBar;
